<template>


    <div class="dashboard-editor-container" style="padding:0px; ">
      <el-row :gutter="12" style="padding:0 6px 0 0;margin-bottom:16px;  " >
        <div class=" d1"  >
          <div class="tou">
          <div class="  s1" >
            <div class="  z1" style="padding: 0;margin: 0;border-style: none;">
              <el-image
                style="margin-left: 20px; margin-top: 5px;"
                :src="require('@/assets/images/36.png')">

              </el-image>
            </div>
                <div  class=" y1">
                  <el-button class="an3" ><router-link class="link-type" :to="'/shou'" style=" color: whitesmoke">成果展示</router-link></el-button>
                  <el-button class="an3" ><router-link class="link-type" :to="'/mwnhugongshi'" style=" color: whitesmoke">转化公示</router-link></el-button>
                  <el-button class="an3" ><router-link class="link-type" :to="'/liucheng'" style=" color: whitesmoke">转化流程</router-link></el-button>
                </div>
                <div class=" y2">
                  <el-button class="an2" style="background-color: rgba(0, 0, 0, 0.1);" v-if="roleId==10" @click="handleRecord">登录</el-button>
                  <el-button class="an6" style="background-color: rgba(0, 0, 0, 0.1);" v-if="roleId==10" @click="handleRego">注册</el-button>
                  <!--<el-button class="an2" style="background-color: rgba(0, 0, 0, 0.1);"><router-link class="link-type" :to="'/index'" style="color: whitesmoke">进入后台</router-link></el-button>-->
                  <el-button class="an4" style="background-color: rgba(0, 0, 0, 0.1);" @click="handleBack" v-show="roleId==1||roleId==11||roleId==12||roleId==13||roleId==14">返回</el-button>

                </div>

              </div>
          </div>
        <div class="x1" >
          <div  class="clearfix">
            <div style="padding:90px 0 0 80px;">
              <span style="font-size: 30px; color: whitesmoke"><b>科技成果</b></span>
            </div>
            <div style="padding:20px 0 0 80px;">
              <span style="font-size: 22px; color: whitesmoke"><b>集结行业最优科技成果转化项目,技术持有者可自由发布行业顶尖成果</b></span>
            </div>
          </div>
          <div  class="clearfix" style="padding:190px 0 0 60px;">

            <span style="font-size: 20px; color: whitesmoke"><b>成果展示·成果详情</b></span>

          </div>
        </div>
        </div>
      </el-row>

      <!-- 左侧内容 -->
      <el-card>
      <el-row :gutter="12" style="padding:0 175px 0 175px;margin-bottom:16px;">
      <div class="left">
        <!-- 左侧内容的具体实现 -->
        <div>

          <div style="margin-bottom: 20px;">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
              <el-menu-item index="1">基本信息</el-menu-item>
              <el-menu-item @click="scrollTo('achievement-info')" index="2">
                <a    offset="-1000">成果情况</a>
              </el-menu-item>
              <el-menu-item @click="scrollTo('innovation-info')"  index="3">
                <a   offset="-1000">创新点描述</a>
              </el-menu-item>
              <el-menu-item @click="scrollTo('proof-graph')"  index="4">
                <a   offset="-1000">授权证明图</a>
              </el-menu-item>
              <el-menu-item @click="scrollTo('contest-info')" index="5">
                <a  >参赛经历<el-button type="text"></el-button></a>
              </el-menu-item>
              <el-menu-item  @click="handleCheck('phone-info')" index="6">
                <a  >联系方式</a>
              </el-menu-item>
            </el-menu>
          </div>

        <el-card style=" border-style: solid; border-color: lightblue;"  class="box-card" shadow="always ">
          <el-row>
            <el-col :span="20">
              <div style="padding-bottom: 20px;position: relative;">
                <span class="shugang"></span>
                <span class="jianju" style="font-weight:bold; font-size: 20px;">基本信息</span>
              </div>
              <el-descriptions column="1" class="my-descriptions" style="margin-left: 10.5px;font-size: 16px;">
                <el-descriptions-item label="成果名称">
                  <strong style="color: black;">{{form.resultName}}</strong>
                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions column="3" class="my-descriptions" style="margin-bottom: 30px; margin-left: 10.5px;font-size: 16px;">
                <el-descriptions-item label="成果类型"><dict-tag :options="dict.type.cxcy_result_type" :value="form.resultType"/></el-descriptions-item>
                <el-descriptions-item label="成果类别"><dict-tag :options="dict.type.cxcy_result_category" :value="form.resultCategory"/></el-descriptions-item>
                <el-descriptions-item label="负责人">{{form.firstName}}</el-descriptions-item>
               <!-- <el-descriptions-item label="负责人学号">{{form.firstNumber}}</el-descriptions-item>-->
                <el-descriptions-item label="负责人学院"><dict-tag :options="dict.type.cxcy_college" :value="form.firstCollege"/></el-descriptions-item>
                <el-descriptions-item label="成果等级"><dict-tag :options="dict.type.cxcy_result_grade" :value="form.resultGrade"/></el-descriptions-item>
                <!-- <el-descriptions-item label="指导教师">{{form.advisorName1}} {{form.advisorTitl1}} {{form.advisorMajor1}}</el-descriptions-item>-->
                <el-descriptions-item label="技术领域"><dict-tag :options="dict.type.cxcy_technology" :value="form.technology"/></el-descriptions-item>
                <el-descriptions-item label="负责人专业">{{form.firstMajor}}</el-descriptions-item>
                <el-descriptions-item label="是否大创"><dict-tag :options="dict.type.cxcy_isno" :value="form.isShow"/></el-descriptions-item>
                <el-descriptions-item label="完成单位">{{form.completionUnit}}</el-descriptions-item>
                <el-descriptions-item label="年份"><dict-tag :options="dict.type.cxcy_result_year" :value="form.resultYear"/></el-descriptions-item>
                <el-descriptions-item label="成果背景"><dict-tag :options="dict.type.cxcy_result_background" :value="form.resultBackground"/></el-descriptions-item>
                <el-descriptions-item label="成果来源"><dict-tag :options="dict.type.cxcy_result_source" :value="form.resultSource"/></el-descriptions-item>
              </el-descriptions>

            </el-col>
            <el-col :span="4">
              <el-button class="color-btn" type="primary" @click="fileDown" >全文 PDF 下载</el-button>
            </el-col>
          </el-row>
        </el-card>
          <el-card style=" border-style: solid; border-color: lightblue;"  class="box-card" shadow="always ">
          <div id="achievement-info">
               <div style="padding-bottom: 20px;position: relative;">
                 <span class="shugang"></span>
               <span class="jianju" style="font-weight:bold; font-size: 20px;">成果情况</span>
              </div>
              <el-descriptions :colon="false" style="margin-bottom: 30px;font-size: 16px;">
              <el-descriptions-item >
              <span style="text-align: justify; text-align-last: left; ">
               {{form.resultIntroduction}}
               </span>
              </el-descriptions-item>
              </el-descriptions>
          </div>
          </el-card>
          <el-card style=" border-style: solid; border-color: lightblue;"  class="box-card" shadow="always ">
          <div   id="innovation-info" >
           <!-- <el-row>-->
             <!-- <el-col :span="12">-->
              <div style="padding-bottom: 20px;position: relative;">
                <span class="shugang"></span>
                <span class="jianju" style="font-weight:bold; font-size: 20px;">创新点描述</span>
              </div>
              <el-descriptions  :colon="false" style="margin-bottom: 30px;font-size: 16px;">
                <el-descriptions-item >
          <span style="text-align: justify; text-align-last: left; ">
            {{form.innovationPoint}}
          </span>
                </el-descriptions-item>
              </el-descriptions>
              <div class="wrapper" >
                <div class="left-img">
                  <img style="height: 350px;" :src="form.picturePath1"  />
                  <p   class="text" >成果展示图</p>
                </div>
                <!--<div class="left-img">
                  <img v-if="form.picturePath2!=null" :src="form.picturePath2"  />
                  <p  v-if="form.picturePath2!=null" class="text">成果图片 2</p>
                </div>-->
              </div>

              <!--<el-col :span="12"></el-col>
              <div style="padding-bottom: 20px;">
                <span style="font-weight:bold; font-size: 20px;">授权证明图</span>
              </div>
              <div class="wrapper" >
                <div class="left-img1">
                  <img  :src="form.picturePath2"  />
                  <p   class="text" >授权证明图</p>
                </div>
              </div>-->
          </div>
          </el-card>
          <el-card style=" border-style: solid; border-color: lightblue;"  class="box-card" shadow="always ">
            <div   id="proof-graph" >
              <div style="padding-bottom: 20px;position: relative;">
                <span class="shugang"></span>
                <span class="jianju" style="font-weight:bold; font-size: 20px;">授权证明图</span>
              </div>
              <div class="wrapper" >
                <div class="left-img1">
                  <img style="height: 350px;" :src="form.picturePath2"  />
                  <!--<p   class="text" >授权证明图</p>-->
                  <div class="wenzi">授权证明图</div>
                </div>
              </div>
            </div>
          </el-card>
          <el-card style=" border-style: solid; border-color: lightblue;"  class="box-card" shadow="always ">
          <div   id="contest-info" >
            <div style="padding-bottom: 20px;position: relative;">
              <span class="shugang"></span>
              <span class="jianju" style="font-weight:bold; font-size: 20px;">参赛经历</span>
            </div>
            <el-descriptions  :colon="false" style="margin-bottom: 30px;font-size: 16px;">
              <el-descriptions-item >
          <span style="text-align: justify; text-align-last: left; ">
            {{form.competitionExperience}}
          </span>
              </el-descriptions-item>
            </el-descriptions>
          </div>
            <br>
            <br>
            <br>
          </el-card>
          <el-card style=" border-style: solid; border-color: lightblue;"  class="box-card" shadow="always" v-if="cerifica==0">
          <div   id="phone-info" >
            <el-row>
              <el-col :span="20">
                <div style="padding-bottom: 20px;position: relative;">
                  <span class="shugang"></span>
                  <span class="jianju" style="font-weight:bold; font-size: 20px;">联系方式</span>
                </div>
                <el-descriptions column="2"  class="my-descriptions" style="margin-bottom: 30px; margin-left: 10.5px;font-size: 16px;">
                  <el-descriptions-item label="手机号码">{{form.firstPhone}}</el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>
          </div>
          </el-card>
        </div>
      </div>
      </el-row>
      </el-card>
    </div>

</template>

<script>
  import { listAchievement, getAchievement, delAchievement, addAchievement, updateAchievement,aduitAchievement,signTransform,getTransform,getRoleId ,Cerifica } from "@/api/module/cjl/achievement";

export default {
  dicts: ['cxcy_result_category','cxcy_result_type','cxcy_result_grade','cxcy_result_source','cxcy_technology','cxcy_isno','cxcy_cooperative_object','cxcy_result_year','cxcy_result_background','cxcy_college','cxcy_major','cxcy_signing_status'],
    data() {
      return {
        roleId: '',
        cerifica:'1',
        name:"123",
        activeIndex: '1',
        tableData: [{
          date: '2022年“建行杯”第八届互联网十大学生创新创业大赛',
          name: '2022年9月',
          address: '省级金奖'
        }, {
          date: '2022年“建行杯”第八届互联网十大学生创新创业大赛',
          name: '2022年9月',
          address: '省级金奖'
        }, {
          date: '2022年“建行杯”第八届互联网十大学生创新创业大赛',
          name: '2022年9月',
          address: '省级金奖'
        }, {
          date: '2022年“建行杯”第八届互联网十大学生创新创业大赛',
          name: '2022年9月',
          address: '省级金奖'
        }],

        form: {
          name: '',
        }
      }
    },

  beforeRouteUpdate(to, from, next) {

    const oldId = from.query.id;
    const  newId= to.query.id;

    if (oldId !== newId) {
      // id 发生变化，执行相应操作
      if (newId) {
        // 获取新的表详细信息
        getAchievement(newId).then(res => {
          this.form = res.data;
          next();
        });
      } else {
        // 清空表详细信息
        this.form = null;
        next();
      }
    } else {
      // id 没有变化，继续导航
      next();
    }
  },

  /*watch: {
    id(){
      const id = this.$route.query.id;
      if (id) {
        // 获取表详细信息
        getAchievement(id).then(res => {
          this.form = res.data;
        });
      }
    },

  },*/
  created() {
    getRoleId().then(res => {
      this.roleId = res;
    });
    const id = this.$route.query.id;
    if (id) {
      // 获取表详细信息
      getAchievement(id).then(res => {
        this.form = res.data;
      });
    }
  },
  methods: {
    //登录
    handleRecord(){
      this.$router.push({ path: "/login1" })
    },
    //注册
    handleRego(){
      this.$router.push({ path: "/register1" })
    },
    //进入后台刷新
    handleBack(){
      this.$router.push({path: "/shou"});
    },
    scrollTo(id) {
      // 计算页面中指定元素的位置
      const element = document.getElementById(id)
      const rect = element.getBoundingClientRect()
      const offset = window.pageYOffset || document.documentElement.scrollTop
      const targetY = rect.top + offset
      // 执行滚动操作
      window.scrollTo({
        top: targetY,
        behavior: 'smooth'
      })
      // 更新菜单项的选中状态
      this.activeIndex = String(element.dataset.index)
    },
    handleCheck(id){
     getRoleId().then(res => {
       this.roleId = res;
       if (this.roleId == 10) {
         this.$modal.confirm('请先登录才能进行查看').then(function () {
         }).then(() => {
           this.$router.push({path: "/login1"});
         });
       }else{
         Cerifica().then(response => {
           this.cerifica = response
           if (this.cerifica == 0) {
             // 计算页面中指定元素的位置
             const element = document.getElementById(id)
             const rect = element.getBoundingClientRect()
             const offset = window.pageYOffset || document.documentElement.scrollTop
             const targetY = rect.top + offset
             // 执行滚动操作
             window.scrollTo({
               top: targetY,
               behavior: 'smooth'
             })
             // 更新菜单项的选中状态
             this.activeIndex = String(element.dataset.index)
           } else {
             this.$modal.msgError("未认证或者认证失败，无法查看信息");
           }
         });
       }
     });
},
fileDown() {
  if (this.form.note1 == null || this.form.note1=="") {
    this.$modal.msgError("暂无文件");
  } else {
    const materialsAddress = this.form.note1;
    let fileName = this.form.resultName || '';
    const xhr = new XMLHttpRequest();
    xhr.open('GET', materialsAddress, true);
    xhr.responseType = 'blob';
    xhr.setRequestHeader('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36');
    xhr.onload = function () {
      if (xhr.status === 200) {
        const contentType = xhr.response.type;
        const contentDisposition = xhr.getResponseHeader('Content-Disposition');


        if (contentDisposition) {
          const fileNameMatch = contentDisposition.match(/filename="(.*?)"/);
          if (fileNameMatch.length > 1) {
            fileName = fileNameMatch[1];
          }
        }

        if (!fileName) {
          // 如果从响应头中没有解析出文件名，则从 URL 中获取文件名
          const urlSplit = materialsAddress.split('/');
          fileName = urlSplit[urlSplit.length - 1];
        }

        saveAs(xhr.response, fileName);
      } else {
        console.error('文件下载失败');
      }
    };
    xhr.send();
  }
}

},
}

</script>


<style lang="scss" scoped>


  .sx{
    border-style: none;
    width: 170px;
    height: 30px;

  }

  .an1{
    font-size: 22px;
    width: 100px;
    height: 60px;
    color: whitesmoke;
    border-style: none;
    background-color: #f04e0f;
  }
  .an6{
    font-size: 15px;
    width: 80px;
    height: 40px;
    color: whitesmoke;
    position: absolute;
    top: 20px; /* 设置相对于 .y2 容器的顶部位置 */
    right: 30px; /* 设置相对于 .y2 容器的左侧位置 */
  }
  .an2{
    font-size: 15px;
    width: 80px;
    height: 40px;
    color: whitesmoke;
    position: absolute;
    top: 20px; /* 设置相对于 .y2 容器的顶部位置 */
    right: 120px; /* 设置相对于 .y2 容器的左侧位置 */
  }
  .an3{
    font-size: 22px;
    font-weight: bold;
    width: 150px;
    height: 80px;
    border-style: none;
    border-radius: 0px;
    background-color: rgba(0, 0, 0, 0);
  }
  .an4{
    font-size: 15px;
    width: 80px;
    height: 40px;
    color: whitesmoke;
    position: relative;
    left: 40px; /* 假设要向右移动 20 像素 */
  }
  /*背景*/
  .bj{
    background-image: url("30.png");
    background-size: 100% 100%;
    height: 400px;

  }
  /*竖杠*/
  .shugang {
    position: absolute;
    left: -5px;
    top: 0;
    width: 2px;
    height: 60%;
    background-color: blue;
    border-left: 4px solid blue;
  }
  .jianju {
    padding-left: 8px;
  }
  /*顶端固定*/
  .tou {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #fff;
    z-index: 999;
  }
  /*搜索框*/
  .sousuo{
    width: 800px;
    font-size: 22px;

  }
  ::v-deep .el-input__inner{
    height: 60px;
  }

  .s1{
    display: flex;
    height: 80px;
    width: 100%;
    background-color: rgba(0, 0,0, 0.2);
  }
  .d1{

    background-size: 100% 100%;

    height: 400px;
    scroll-padding: 0;
    background-image: url("34.png");
    border-style: none;
    margin: 0;
    padding: 0;



  }
  .box-card{
    margin-bottom: 4px;
  }
  .z1{
    width: 40%;
    height: 80px;
    background-color: #0574d0;
  }
  .y1{

    height: 80px;
    width: 50%;
    background-color: #0574d0;
  }

  .y2{
    display: flex;
    padding-top: 22px;
    padding-left: 65px;
    width: 15%;
    height: 80px;
    //background-color: rgba(0, 0, 0, 0);
    background-color: #0574d0;
  }

  .big_box{display: flex;height: 280px;}
  /*展示左图片*/
  .z{
    width: 25%;
    height: 250px;

  }
  /*展示中空白*/
  .c{
    width: 3%;
    height: 250px;
  }
  /*展示右信息*/
  .y{
    width: 70%;
    height: 250px;

  }
  /*按钮*/
  .an{
    height: 30px;
  }




  .dashboard-editor-container {
    overflow-x: hidden; /*隐藏横向滚动条*/
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
      padding-left: 30px;
    }

    .el-tabs .el-tabs__content {
      max-height: 100px;
      overflow: auto;
    }

  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }

  /* 固定 应用board 宽度; */
  .el-tabs--card {
    height: calc(32vh);
    /* overflow-y: auto; */
  }

  .el-tab-pane {
    height: calc(32vh);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .tag-style{
    height: 19px;
    color: #116fcf;
    font-family: 黑体;
    font-size: 13px;
    float: right;
    margin-right: 20px;
    line-height:15px;

  }
  .tag-menu-style{
    height: 19px;
    color: #116fcf;
    font-family: 黑体;
    font-size: 13px;
    float: right;
    margin-right: 0px;
    line-height:15px;
    margin-top: 5px;

  }

  .bannerimg{
    width: 100%;
    height: inherit;
  }
  /* 文字样式*/
  .carousel-p {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 25px;
    line-height: 35px;
    text-align: center;
    padding-left: -28px;
    color: white;
    bottom: 66px;
    position: relative;
  }
  .el-icon-d-arrow-right{
    float: right;
    margin-right: 20px;
    padding-top: 5px;
    font-size:10px !important;
  }

  .is-selected {
    color: #1989FA;
  }


  /*日历自定义样式*/
  ::v-deep .el-calendar__header {
    // 修改头部背景颜色
    background-color: #FFFFFF;
    padding: 3px 5px;
    border: none;
    display: flex;
    justify-content: center;
    margin-top: 35px;

    .el-calendar__button-group {
      // 隐藏原生按钮
      display: none;
    }


    .el-calendar__title {
      // 修改头部标题的字体颜色
      color: #495060 !important;
      font-size: 20px;
      font-weight: bolder;
    }
  }

  ::v-deep .el-calendar__body {
    // 修改主题部分
    padding: 0;
  }

  ::v-deep .el-calendar-table {
    thead {
      th {
        // 修改头部星期部分
        padding: 5px;
        background-color: #2f81d5;
        color: white;
      }
    }

    .is-selected {
      .el-calendar-day {
        p {
          // 选中日期颜色
          color: black;
        }
      }
    }

    .el-calendar-day {
      // 每天小块样式设置
      padding: 0;
      height: 20px;
      display: flex;
      justify-content: center;
      align-items: center;

      p {
        // 所有日期颜色
        color: black;
        z-index: 1;
        user-select: none;
        display: flex;
      }
    }
  }

  ::v-deep .el-calendar-table__row {
    .prev, .next {
      // 修改非本月
      .el-calendar-day {
        p {
          color: #f0d9d5;
        }
      }
    }

    td {
      // 修改每一个日期td标签
      &:first-child, &:last-child {
        background-color: #f5f5f5;
      }
    }
  }

  button {
    padding: 3px 10px;
  }

  //隐藏el-tab-pane滚动条
  ::v-deep .el-tab-pane {
    height: calc(100vh - 110px);
    overflow-y: hidden;
  }


  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden!important;


  }

  ::v-deep .-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
  }
  ::v-deep.el-table .warning-row {
    background: oldlace;
  }

  ::v-deep.el-table .success-row {
    background: #f0d9d5;
  }
  .pos1{

    position:absolute;             // 绝对定位,同时规定left和top
    left: 0;
    top:0;
  }


  //swiitch开关的样式
  ::v-deep .el-switch__core{
    width:30px!important;
    height:15px;

  }
  //111
  ::v-deep .el-tabs__nav-wrap.is-scrollable {
    margin-right: 40px;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  ::v-deep .el-switch__core::after{
    width:14px;
    height:14px;
    margin-top:-1px;
    margin-bottom: -4px;
  }
  ::v-deep.el-switch.is-checked .el-switch__core::after {
    left: 100%;
    margin-left: -14px;
  }

  //更改table表中文字的颜色
  ::v-deep.el-table{
    color: #000000;
  }

  //日程文字颜色
  ::v-deep.el-alert--success.is-light {
    background-color: #e7faf0;
    color: #000000;
  }
  ::v-deep.el-alert--success.is-light .el-alert__description {
    color: #507761;
  }
  .left-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .left-img img {
    max-width: 100%;
    display: block;
    height: 400px;
    margin: 20px;
  }

  .left-img .wenzi {
    margin-top: 5px; /* 调整文字与图片之间的间距 */
  }

  .left-img1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .left-img1 img {
    max-width: 100%;
    display: block;
    height: 600px;
    margin: 20px;
  }

  .left-img1 .wenzi {
    margin-top: 5px; /* 调整文字与图片之间的间距 */
  }

  /*数字加圈*/
  .number_top_circle {
    display: table-cell;
    border-radius: 18px;
    background-color: #4b9dfc;
    width: 25px;
    height: 25px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
  }
  .number_top_circle_odd {
    display: table-cell;
    border-radius: 18px;
    background-color: #4b9dfc;
    width: 25px;
    height: 25px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
  }

  //个人中心头像样式
  .user-avatar{
    border-radius: 50%;
    height:165px;
    border: 1px solid #409eff;

  }
  //去掉table表下面的边框线
  .el-table__row>td {
    border: none;
  }

  .el-table::before {
    height: 0px;
  }
  .el-menu-item {
    margin-right: 20px;
    font-weight: bold; /* 设置字体加粗 */
    font-size: 20px;
    color: #000; /* 设置字体颜色为黑色 */
    text-indent: 0em; /* 将文字整体向左移动一个字符 */
    line-height: 50px; /* 以你锚点所在元素的高度为准 */

  }

  .el-menu--horizontal {
    border-bottom: none;/* 去掉水平线 */
  }
  .el-menu-item,
  .el-menu-item:hover {
    color: #333 !important;
  }

  .patent-list-container {

    border: 2px solid #e1e6f6;
    padding: 1rem;
  }
  .el-menu-item.is-active {
    border-bottom: 2px solid #409EFF;
    padding-bottom: 1px; /* 将下划线拉近文字 */
  }
  .color-btn {
    width: 130px;
    height: 40px;
    background-color: #0574d0;
    color: #ffffff; /* 设置文字颜色为白色 */
    font-size: 16px;
    position: relative;
    left: 60px; /* 假设要向右移动 20 像素 */
  }
  //纵向分割线
  ::v-deep.el-divider--vertical{

    height: 10em;
  }

  .selectBtn{
    background-color: #1482f0;
    color: #ffffff;
  }

</style>
<!-- 日历table表的样式-->
<style>




  .el-image__error {
    font-size: 10px;

  }






  .size-icon{
    font-size: 25px;
  }

  .createInfo th, .createInfo tr {
    background-color: #409eff !important;
    color: #FFFFFF;
    text-align: center;

  }
  .createInfo tbody tr:hover>td {
    background-color: #409eff !important;
  }

  /*日期组件绝对定位*/
  .main{
    position: relative;

  }
  .target{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,0%);
  }


  /*menu中更多按钮*/
  .loginOut{
    /* position: absolute;right:23%;top:25px;*/
    position: absolute;right:26%;top:33px;
    color: #e6a23c;
    /*  font-weight: 600;
      font-size: 14px;*/
  }
  .grid-content{

    padding-left: 0%;
    padding-right: 0%;

  }


  /* 顶部列表 */
  .top-list-image{
    margin-right: 12px;
    font-size: 24px;
    width: 40px;
    padding-top: 0px;
    height: 40px;
    vertical-align: middle;
    text-align: center;
    border-radius:16px;
    color: #fff;
  }

  .top-list-col{
    height: 100px;
    padding: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 4px;
  }

  .top-list-span{
    max-width: 4em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /*超出部分用...代替*/
  }

</style>
